<template>
  <div class="phone">
    <!-- 房间头部 -->
    <div class="room-header">
      <p class="room-name">******</p>
      <p class="room-id">ID: 20231204</p>
    </div>
    <!-- 队伍头部 -->
    <div class="team-header">
      <div class="team-header-left">
        <img src="https://img.zcool.cn/community/01c0ab5a9812f1a801219586142fbd.jpg@1280w_1l_2o_100sh.jpg" class="avatar"
          alt="">
        <span class="team-name">A</span>
      <span class="captain">队长</span>
      </div>
      <div class="score">
        
      </div>
      <div class="team-header-right">
        <img src="https://img.zcool.cn/community/01b3cd5a9812f1a801206d9661cddf.jpg@1280w_1l_2o_100sh.jpg" class="avatar"
          alt="">
        <span class="team-name">B</span>
      </div>
    </div>
    <!-- 队员部分 -->
    <div class="players-area">
      <ul class="players-area-left ">
        <li class="player">
          <img src="https://img.zcool.cn/community/01c0ab5a9812f1a801219586142fbd.jpg@1280w_1l_2o_100sh.jpg"
            class="avatar" alt="">
          <span class="player-name">队友1号</span>
        </li>
        <li class="player">
          <img src="https://img.zcool.cn/community/01c0ab5a9812f1a801219586142fbd.jpg@1280w_1l_2o_100sh.jpg"
            class="avatar" alt="">
          <span class="player-name">队友2号</span>
        </li>
        <li class="player">
          <img src="https://img.zcool.cn/community/01c0ab5a9812f1a801219586142fbd.jpg@1280w_1l_2o_100sh.jpg"
            class="avatar" alt="">
          <span class="player-name">队友3号</span>
        </li>
        <li class="player">
          <img src="https://img.zcool.cn/community/01c0ab5a9812f1a801219586142fbd.jpg@1280w_1l_2o_100sh.jpg"
            class="avatar" alt="">
          <span class="player-name">队友4号</span>
        </li>
        <li class="player">
          <img src="https://img.zcool.cn/community/01c0ab5a9812f1a801219586142fbd.jpg@1280w_1l_2o_100sh.jpg"
            class="avatar" alt="">
          <span class="player-name">队友5号</span>
        </li>
      </ul>
      <div class="midle">
        <h5>准备中</h5>

      </div>
      <ul class="players-area-right">
        <li class="player">
          <img src="https://img.zcool.cn/community/01c0ab5a9812f1a801219586142fbd.jpg@1280w_1l_2o_100sh.jpg"
            class="avatar" alt="">
          <span class="player-name">队友1号</span>
        </li>
        <li class="player">
          <img src="https://img.zcool.cn/community/01c0ab5a9812f1a801219586142fbd.jpg@1280w_1l_2o_100sh.jpg"
            class="avatar" alt="">
          <span class="player-name">队友2号</span>
        </li>
        <li class="player">
          <img src="https://img.zcool.cn/community/01c0ab5a9812f1a801219586142fbd.jpg@1280w_1l_2o_100sh.jpg"
            class="avatar" alt="">
          <span class="player-name">队友3号</span>
        </li>
        <li class="player">
          <img src="https://img.zcool.cn/community/01c0ab5a9812f1a801219586142fbd.jpg@1280w_1l_2o_100sh.jpg"
            class="avatar" alt="">
          <span class="player-name">队友4号</span>
        </li>
        <li class="player">
          <img src="https://img.zcool.cn/community/01c0ab5a9812f1a801219586142fbd.jpg@1280w_1l_2o_100sh.jpg"
            class="avatar" alt="">
          <span class="player-name">队友5号</span>
        </li>
      </ul>
    </div>
  </div>

</template>
<script>
export default {
  name: "Wechat"
}
</script>

<style scoped lang="less">
.phone {
  position: relative;
  margin: 100px auto;
  width: 325px;
  height: 600px;
  border: 1px solid #ff5722;
  background-color: #BDBDBD;
}

.room-header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.team-header {
  display: grid;
  grid-template-columns: 3fr 2fr 3fr;
  width: 100%;
  height: 48px;
  background-color: #3498db;

  .team-header-left,
  .team-header-right,
  .score {
    display: flex;
    align-items: center;
  }

  .team-header-left {
    padding-right: 5px;
    flex-direction: row-reverse;
    justify-content: flex-start;
  }

  .score {
    justify-content: center;
    align-items: center;
    background-color: #2ecc71;
  }

  .team-header-right {
    padding-left: 5px;
    background-color: #ff5722;
  }

}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  // transform: scale(1.1);
}

.players-area {
  padding: 10px;
}

.players-area {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  .players-area-left,.players-area-right {
    display: flex;
    flex-direction: column;
  }

  .players-area-right {


    .player{
      background-color: #e74c3c;
    }
  }

  .player {
    position: relative;
    margin-top: 5px;
    padding: 5px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #3498db;
    border-radius: 10px;

    .avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
    }

    .player-name {
      margin-top: 5px;
      font-size: 13px;
    }
    .captain{
      width: 25px;
      left: 50%;
      top: 50%;
      position: absolute;
      font-size: 12px;
      background-color: yellow;
    }
  }

}
.midle{
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>